<template>
  <el-card header="用户" shadow="naver">
    <div class="admin-user-body__group">
      <div class="item">
        <div>注册用户</div>
        <span class="num">233</span>
      </div>
      <div class="item">
        <i class="point__item warning" />
        <div>会员</div>
        <span class="num">10</span>
      </div>
      <div class="item">
        <i class="point__item danger" />
        <div>小黑屋</div>
        <span class="num">10</span>
      </div>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
.admin-user-body__group {
  display: flex;
  justify-content: flex-start;
  .item {
    width: 100%;
    line-height: 2;
    white-space: nowrap;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    margin-right: 30px;
    &:first-child {
      border-right: 1px solid #ebeef5;
      padding-right: 10px;
    }
    .num {
      font-size: 20px;
    }
    .point__item {
      width: 8px;
      height: 8px;
      display: block;
      border-radius: 50%;
      position: absolute;
      top: 8px;
      left: -10px;
    }
  }
}
</style>
